<!-- 实名认证-->
<template>
	<div class="certification-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<div class="certification">
			<div class="certification-top ">
				<div class="certification-title">实名认证</div>
				<div class="certification-title-hint">
					请拍摄上传身份证，进行实名认证
				</div>
			</div>
			<div class="certification-info">
				<van-field v-model="certificationInfo.name" name="name" label="所在机构" placeholder="填写您所在的机构" clearable
					maxlength="100" label-class="field-label" input-align="right"></van-field>
			</div>
			<div class="certification-info">
				<van-field v-model="certificationInfo.tel" name="tel" label="联系电话" placeholder="填写您的联系电话" clearable
					maxlength="100" label-class="field-label" input-align="right"></van-field>
			</div>
			<div class="certification-pic-panel">
				<div class="certification-pic-box" @click='showGuide(0)'>
					<div class="frame-pic">
						<van-image width="100%" height="100%" :src="require('../../assets/imgs/certification-pic.png')">
						</van-image>
					</div>
					<div class="certification-pic">
						<van-image width="100%" height="100%" :src="
								certificationInfo.frontalpic
									? certificationInfo.frontalpic
									: require('../../assets/imgs/certification-frontalpic.png')
							"></van-image>
					</div>
					<!-- 其实人像面才是反面，自己吐槽自己，懒得改了 -->
					<div class="certification-pic-hint">点击上传人像面</div>
				</div>
				<div class="certification-pic-box" @click='showGuide(1)'>
					<div class="frame-pic">
						<van-image width="100%" height="100%" :src="require('../../assets/imgs/certification-pic.png')">
						</van-image>
					</div>
					<div class="certification-pic">
						<van-image width="100%" height="100%" :src="
								certificationInfo.reversepic
									? certificationInfo.reversepic
									: require('../../assets/imgs/certification-reversepic.png')
							"></van-image>
					</div>
					<div class="certification-pic-hint">点击上传国徽面</div>
				</div>
			</div>
			<div class="certification-btn-box">
				<button class="btn main-btn certification-btn" @click="goCertification()">
					提交
				</button>
			</div>
		</div>
		<van-popup v-model="showPopup" position="bottom" :style="{ height: '7rem' }">
			<div class="popup">
				<div class="popupCancel" @click="showGuide()">
					<van-image width="100%" height="100%" :src="require('../../assets/imgs/cancel.png')"></van-image>
				</div>
				<div class="popup-title">身份证拍摄注意事项：</div>
				<div class="popup-hint">请拍摄本人有效期内身份证，过期身份证照片无法通过审核。</div>
				<div class="popop-img">
					<van-image width="100%" height="100%" :src="guideList[guideType]"></van-image>
				</div>
				<van-uploader :after-read="addFile">
					<button class="btn main-btn openup-btn">开始上传</button>
				</van-uploader>
			</div>
		</van-popup>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'
	import {
		uploadVideo,
		login_api,
	} from '../../api/index.js'
	export default {
		name: 'certification',
		components: {
			NavBar
		},
		data() {
			return {
				isLoading: false,
				title: '',
				guideList: [
					require('../../assets/imgs/certification-guide0.png'),
					require('../../assets/imgs/certification-guide1.png')
				],
				certificationInfo: {
					name: '',
					tel: '',
					frontalpic: '',
					reversepic: '',
				},
				showPopup: false,
				guideType: 0, //0-人像面，1-国徽面
				file1: null,
				file2: null,
			}
		},
		methods: {
			showGuide(type = 0) {
				this.guideType = type;
				this.showPopup = !this.showPopup;
			},
			goCertification() {
				let formData1 = new FormData()
				let formData2 = new FormData()
				formData1.append('file', this.file1)
				formData2.append('file', this.file2)
				uploadVideo(formData1, (res) => {
					console.log(res.url)
					let url1 = res.url;
					uploadVideo(formData2, (res) => {
						let url2 = res.url;
						let data = {
							"CorpName": this.certificationInfo.name,
							"Tel": this.certificationInfo.tel,
							"CreditPicUrl1": url1,
							"CreditPicUrl2": url2,
						}
						login_api.saveUsercredit(data, (res) => {
							console.log(res)
							Toast('保存成功')
							setTimeout(() => {
								this.$router.back()
							}, 1000)
						})
					})
				})
				
			},
			addFile(res) {
				console.log('addFile', res)
				if (res != null) {
					if (this.guideType ==0) {
						this.certificationInfo.frontalpic = res.content;
						this.file1 = res.file;
					}
					if (this.guideType ==1) {
						this.certificationInfo.reversepic = res.content;
						this.file2 = res.file;
					}
					this.showPopup = !this.showPopup;
				}
			}
		},
	}
</script>

<style scoped>
	.van-cell {
		padding: 0;
	}

	.field-label {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
	}

	.certification-panel {
		width: 100%;
		height: 100%;
		padding-top: 0.88rem;
		background: #f6f5fb;
	}

	.certification {
		min-height: calc(100vh - 0.88rem);
	}

	.certification-top {
		padding: 0.44rem 0 0.44rem 0.7rem;
		margin-top: 1px;
		background: #ffffff;
	}

	.certification-title {
		height: 0.58rem;
		font-size: 0.42rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.58rem;
	}

	.certification-title-hint {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.4rem;
		margin-top: 0.08rem;
	}

	.certification-info {
		padding: 0.44rem 0.3rem;
		margin-top: 1px;
		background: #ffffff;
	}

	.certification-pic-panel {
		margin-top: 1px;
		padding: 0.28rem 0 1.4rem;
		background: #ffffff;
	}

	.certification-pic-box {
		padding: 0.72rem 1.04rem 0 1.06rem;
		position: relative;
	}

	.frame-pic {
		width: 5.4rem;
		height: 3.6rem;
		position: absolute;
		top: 0.72rem;
		left: 1.06rem;
		z-index: 10;
	}

	.certification-pic {
		width: 5.4rem;
		height: 3.6rem;
	}

	.certification-pic-hint {
		text-align: center;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #454545;
		line-height: 0.4rem;
		margin-top: 0.2rem;
	}

	.certification-btn-box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 20;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.certification-btn {
		margin-bottom: 0.4rem;
	}
	
	.van-popup{
		display: flex;
		align-items: flex-end;
	}

	.popup {
		background-color: #FFFFFF;
		position: relative;
		overflow: hidden;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.popupCancel {
		position: absolute;
		width: 0.3rem;
		height: 0.3rem;
		top: 0.3rem;
		right: 0.28rem;
	}

	.popup-title {
		margin: 0.2rem 0.28rem 0;
		height: 0.5rem;
		font-size: 0.36rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.5rem;
	}

	.popup-hint {
		margin: 0.44rem 0.28rem 0;
		height: 0.34rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.34rem;
	}

	.popop-img {
		width: 7.1rem;
		height: 1.74rem;
		margin: 0.12rem auto 0.74rem;
	}
	
	.openup-btn{
		margin-bottom: 0.8rem;
	}
</style>
